<template>
  <div class="card-border">
    <div class="flex items-center py-[6px]">
      <div class="flex-1">
        <div class="supplier-dtl-title">欧英代产品资料</div>
      </div>
      <el-button
        type="primary"
        v-if="!listData.length && !disabled"
        :disabled="disabled"
        @click="handleAdd"
        ><svg-icon icon-class="add" />新增</el-button
      >
      <el-button
        type="primary"
        v-if="!listData.length && !disabled"
        :disabled="disabled"
        @click="handleAdd"
        ><svg-icon icon-class="add" />新增</el-button
      >
    </div>
    <el-table :data="listData" :row-class-name="rowClassName">
      <el-table-column prop="product_name" label="Product name"></el-table-column>
      <el-table-column prop="lot_number" label="Lot number"></el-table-column>
      <el-table-column prop="serial_number" label="serial number"></el-table-column>
      <el-table-column prop="model" label="model"></el-table-column>
      <el-table-column prop="applicable_age" label="applicable age"></el-table-column>
      <el-table-column prop="working_voltage" label="Working voltage"></el-table-column>
      <el-table-column label="操作" fixed="right" v-if="!disabled" width="90">
        <template #default="{ row, $index }">
          <el-button text type="primary" @click="handleEdit(row, $index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <dialog-form
    ref="dialogFormRef"
    :supplier="supplierList"
    @updateForm="updateForm"
  ></dialog-form>
  <dialog-form
    ref="dialogFormRef"
    :supplier="supplierList"
    @updateForm="updateForm"
  ></dialog-form>
</template>

<script setup lang="jsx" name="ouyingdai">
import { computed } from "vue";
import dialogForm from "./dialogForm.vue";
let handleType = reactive(inject("handleType"));

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  supplier: {
    type: Array,
    default: () => {
      return [];
    },
  },
  index: {
    type: Number,
    default: 0,
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    !(window.BTN_AUTH || []).includes("/goods/task/product/general-info")
  );
});

const { supplier } = toRefs(props);

const listData = computed({
  get: () => {
    let list = [];
    supplier.value.map((i, index) => {
      if (index == props.index && !i.delete && !isEmpty(i.goods_sku_trade_agent)) {
        list.push({
          ...i.goods_sku_trade_agent,
          supplier_id: i.supplier_id,
          supplier_name: i.supplier_name,
          is_default_supplier: i.is_default_supplier,
          currentIndex: index,
        });
      }
    });
    return list;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const supplierList = computed(() => {
  let list = [];
  supplier.value.map((i, index) => {
    if (!i.delete && isEmpty(i.goods_sku_trade_agent)) {
      list.push(i);
      list.push(i);
    }
  });
  return list;
});

const isEmpty = (obj) => {
  if (!obj) {
    return true;
  }
  let flag = true;
  Object.keys(obj).forEach(function (key) {
    if (obj[key] !== null && obj[key] !== undefined) {
      flag = false;
    }
  });
  return flag;
};

const sku = computed({
  get: () => props.sku,
});

const dialogFormRef = ref();
const currentIndex = ref("");
// 新增
const handleAdd = () => {
  nextTick(() => {
    currentIndex.value = "";
    dialogFormRef.value.open("add", { sku: sku.value, status: 1 });
  });
};
const emit = defineEmits(["editRow"]);

// 编辑
const handleEdit = (row, rowIndex) => {
  nextTick(() => {
    emit("editRow");
  });
};

// 新增、编辑回调
const updateForm = (row) => {
  const currentIndex = supplier.value.findIndex((i) => i.supplier_id == row.supplier_id);
  if (currentIndex == -1) return;
  supplier.value[currentIndex].goods_sku_trade_agent = row;
};

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};
</script>
<style lang="scss" scoped></style>
